document.getElementById('create-sticky').addEventListener('submit', function(event) {
    event.preventDefault();

    const departure = document.getElementById('departure').value;
    const destination = document.getElementById('destination').value;
    const time = document.getElementById('time').value;
    const travelMethod = document.getElementById('travel-method').value;
    const gender = document.getElementById('gender').value;

    // 创建一个新的便签元素
    const stickyElement = document.createElement('div');
    stickyElement.className = 'sticky';
    stickyElement.innerHTML = `
        <p>出发：${departure} - 目的地：${destination} - 时间：${time} - 方式：${travelMethod} - 性别：${gender}</p>
        <button class="join-sticky">加入</button>
    `;

    // 将新的便签添加到便签容器中
    const stickiesContainer = document.querySelector('.stickies-container');
    stickiesContainer.appendChild(stickyElement);

    // 重置表单
    event.target.reset();
});
document.addEventListener('DOMContentLoaded', function() {
    // 当DOM加载完成后，为所有“加入”按钮添加事件监听器
    const joinButtons = document.querySelectorAll('.join-sticky');
    joinButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // 当点击“加入”按钮时，执行以下逻辑
            button.disabled = true; // 禁用按钮，防止重复点击
            button.textContent = '成功预约'; // 改变按钮的文本
            button.style.backgroundColor = '#28a745'; // 改变按钮的背景颜色
            button.style.color = 'white'; // 改变按钮的文字颜色
            alert("成功预约，以为您通知对方")
        });
    });
});